<template>
  <div class="login-wrapper">
    <div class="wrapper">
      <el-input placeholder="请输入用户名" v-model="payload.name" v-validate="vali.name" name="name">
        <template slot="prepend">用户名</template>
      </el-input>
      <vali-msg flag="name"></vali-msg>
      <el-input placeholder="请输入密码" type="password" v-model="payload.login_password" v-validate="vali.login_password" name="login_password">
        <template slot="prepend">密　码</template>
      </el-input>
      <vali-msg flag="login_password"></vali-msg>
      <template v-if="showImgCode">
        <el-input placeholder="请输入" v-model="payload.auth_code" v-validate="vali.imgCode" name="imgCode">
          <template slot="prepend">验证码</template>
          <img-code slot="append" :codeBase64="codeBase64" @get="getCode"></img-code>
        </el-input>
        <vali-msg flag="imgCode"></vali-msg>
      </template>
      <div v-else class="empty-div"></div>
      <el-button @click="login">登　　录</el-button>
    </div>
  </div>
</template>

<script>
import { mapState } from 'vuex'
import imgCode from '@/components/public/ImgCode'
import notify from '@/tools/notify'

export default{
  components: { imgCode },
  mounted () {
    if (this.showImgCode) {
      this.autoCallBack(true, this.getCode)
    }
  },
  watch: {
    showImgCode (val) {
      if (val) {
        this.autoCallBack(true, this.getCode)
      }
    }
  },
  computed: {
    ...mapState({
      codeBase64: state => state.auth.loginAuthCode
    }),
    showImgCode () {
      return this.no_user_err_counts >= this.max_login_err_times || this.login_err_times >= this.max_login_err_times
    }
  },
  data () {
    return {
      payload: {
        name: '',
        login_password: '',
        img_type: 'login',
        img_code_id: 1,
        auth_code: '',
        is_auto_login: 0
      },
      max_login_err_times: 5,
      no_user_err_counts: 0,
      login_err_times: 0
    }
  },
  methods: {
    login () {
      this.$validator.validateAll().then(success => {
        if (success) {
          this.$store.dispatch('user/login', this.payload).then(res => {
            this.$store.dispatch('auth/getAuthList', {getServiceAuth: true})
            this.no_user_err_counts = 0
            this.login_err_times = 0
            this.$router.push('/')
          }).catch(err => {
            this.no_user_err_counts += this.showHasIn(err, 'res.no_user_err_counts', 1)
            this.login_err_times += this.showHasIn(err, 'res.login_err_times', 1)
            // this.showImgCode && this.getCode()
            notify.warning(err.msg)
            // console.log('err:', err)
          })
        }
      })
    },
    getCode () {
      this.payload.img_code_id++
      this.$store.dispatch('auth/createLoginAuthCode', {code_id: this.payload.img_code_id})
    }
  }
}
</script>

<style scoped lang="scss">
@import '../assets/scss/base.scss';

.login-wrapper{
  height: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
  background-color: $c-b-zero;
  .wrapper{
    width: 300px;
    height: 200px;
    padding: 50px 100px;
    box-shadow: 5px 5px 5px $c-info;
    background-color: #FFF;
    .el-button{
      width: 300px;
      background-color: $c-main;
      color: $c-t-white;
    }
    .validate-msg{
      margin-left: 90px;
    }
    .img-code-wrapper{
      width: 110px;
      height: 38px;
      margin-left: -20px;
      margin-right: -20px;
      img{
        width: 80px;
        height: 38px;
      }
    }
    .empty-div{
      height: 56px;
    }
  }
}
</style>
